<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    省：<select id="pro"></select>
    市：<select id="city"></select>
    区：<select id="country"></select>
    <script>
    var arr=[
        "北京",["海淀",["海淀1","海淀2","海淀3"],
                "昌平",["昌平1","昌平2","昌平3"],
                "朝阳",["朝阳1","朝阳2","朝阳3"]
            ],
        "四川",["成都",["成都1","成都2","成都3"],
                "西昌",["西昌1","西昌2","西昌3"],
                "宜宾",["宜宾1","宜宾2","宜宾3"]
            ],
            "上海",["浦东",["浦东1","浦东2","浦东3"],
                "闵行",["闵行1","闵行2","闵行3"],
                "静安",["静安1","静安2","静安3"]
            ],

    ]
    var pro=document.getElementById("pro");
    var city=document.getElementById("city");
   var  country=document.getElementById("country");
    for(var i=0;i<arr.length;i++){
        if(typeof arr[i]=="string"){
            pro.add(new Option(arr[i],arr[i]))
             //在pro节点中，  add ==>表示添加的意思    new Option表示创建出来option节点了。  参数1》
        }
    }
    //省改变，渲染对应的市
    pro.onchange=function(){
        for(var i=0;i<arr.length;i++){
        if(typeof arr[i]=="string"){
            if(pro.value==arr[i]){
                //alert(arr[i+1]);
                var brr=arr[i+1];
                city.innerHTML=""
                for(var j=0;j<brr.length;j++){
                  if(typeof brr[j]=="string"){
                    city.add(new Option(brr[j],brr[j]))
                  }
                }
            }
             
        }
    }
    }

     //市改变，渲染对应的区
     city.onchange=function(){
        for(var i=0;i<arr.length;i++){
        if(typeof arr[i]!="string"){
            // alert(arr[i]);
            var brr=arr[i];
            for(var j=0;j<brr.length;j++){
                if(brr[j]==city.value){
                    // alert(brr[j+1]);
                    var crr=brr[j+1];
                    country.innerHTML=""
                    for(var k=0;k<crr.length;k++){
                        country.add(new Option(crr[k],crr[k]))
                    }
                }
            }
             
        }
    }
    }
    </script>
</body>
</html>